<script setup lang="ts">
import {ref} from 'vue'
import type {Rule} from 'ant-design-vue/es/form';

const settingFormRef = ref()
const handelLoading = ref<boolean>(false);
const settingForm = ref({
  name: null,
  sex: 0,
  phone: null,
  password: null,
})
const settingFormRules = ref<Record<string, Rule[]>>({
  name: [
    {
      required: true,
      message: '请填写姓名',
      trigger: ['change', 'blur']
    }],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change'
    }],
  phone: [{
    required: true,
    trigger: ['change', 'blur'],
    validator: (_rule, value) => {
      return new Promise((resolve, reject) => {
        const phoneRegex = /^(134|135|136|137|138|139|150|151|152|157|158|159|178|182|183|184|187|188|130|131|132|155|156|176|185|186|133|149|153|177|180|181|189|192)\d{8}$/;
        if (!value) {
          reject("请填写电话号码");
        } else if (!phoneRegex.test(value)) {
          reject("请填写正确的手机号码");
        } else {
          resolve(); // 验证成功
        }
      });
    }
  }]
})
//保存设置
const handelSubmitSetting = () => {
  settingFormRef.value.validate().then(() => {
    console.log('values',settingForm.value);
  });
}
</script>

<template>
  <a-card title="个人设置" :headStyle="{minHeight:'42px'}">
    <a-form ref="settingFormRef" :model="settingForm" :rules="settingFormRules" layout="vertical"
            style="width: 500px;margin: auto">
      <a-form-item label="姓名：" name="name">
        <a-input v-model:value="settingForm.name"  autocomplete="off"  placeholder="姓名" showCount allow-clear/>
      </a-form-item>
      <a-form-item label="性别：" name="sex">
        <a-radio-group v-model:value="settingForm.sex">
          <a-radio :value="0">男性</a-radio>
          <a-radio :value="1">女性</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="电话：" name="phone">
        <a-input v-model:value="settingForm.phone" :maxlength="11"  autocomplete="off" showCount placeholder="电话号码" allow-clear/>
      </a-form-item>
      <a-form-item label="毕业院校：">
        <a-input v-model:value="settingForm.name" placeholder="毕业院校"  autocomplete="off" allow-clear/>
      </a-form-item>
      <a-form-item label="学历：">
        <a-input v-model:value="settingForm.name" allow-clear/>
      </a-form-item>
      <a-form-item label="所在地：">
        <a-input v-model:value="settingForm.name" allow-clear/>
      </a-form-item>
      <a-form-item label="密码：" name="password">
        <a-input-password v-model:value="settingForm.password" autocomplete="off"  placeholder="填写修改登录密码，留空则不修改原始密码" allow-clear/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" block :loading="handelLoading" @click="handelSubmitSetting">保存修改</a-button>
      </a-form-item>
    </a-form>
  </a-card>

</template>

<style scoped lang="scss">

</style>